﻿<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>3D地球首页</title>
  <script src="js/jquery.js"></script>
  <style>
	#content{
		width:100%;
		height:700px;
		border-radius:6px;
		background-image:url('image/bgim.jpg');
		background-repeat:no-repeat;
		overflow: hidden;
		background-size:cover;
	}
    #img1{
		position:fixed;
		margin:7% 20%;
		width:20%;
		height:200px;
		border:1px gray solid;
		border-radius:4px;
		box-shadow:-4px 8px 10px #172110;
		cursor:pointer;
		background-image:url('image/img1_earth.jpg');
		background-repeat:no-repeat;
		background-size:cover;
	}
	#img2{
		position:fixed;
		margin:7% 60%;
		width:20%;
		height:200px;
		border:1px black solid;
		border-radius:4px;
		box-shadow:-4px 8px 10px #172110;
		cursor:pointer;
		background-image:url('image/world_2.jpg');
		background-repeat:no-repeat;
		overflow: hidden;
		background-size:cover;
	}
	#img3{
		position:fixed;
		margin:25% 20%;
		width:20%;
		height:200px;
		border:1px gray solid;
		border-radius:4px;
		box-shadow:-4px 8px 10px #172110;
		background-image:url('image/china.jpg');
		background-repeat:no-repeat;
		overflow: hidden;
		background-size:cover;
		cursor:pointer;
	}
	#img4{
		position:fixed;
		margin:25% 60%;
		width:20%;
		height:200px;
		border:1px gray solid;
		border-radius:4px;
		box-shadow:-4px 8px 10px #172110;
		cursor:pointer;
		background-image:url('image/moon/moon2.jpg');
		background-repeat:no-repeat;
		overflow: hidden;
		background-size:cover;
	}
  </style>
 </head>
 <body>
	<div id="content">
		<div id="img1" onclick="window.open('earth.html')" title="地球概况图"></div>
		<div id="img2" onclick="window.open('country.html')" title="世界地理地图"></div>
		<div id="img3" onclick="window.open('china3.html')" title="中国地图"></div>
		<div id="img4" onclick="window.open('moon.html')" title="月球知识"></div>
	</div>
 </body>

 <script type="text/javascript"> 
 </script>
</html>